<template>
  <!-- 导航栏组件 -->
  <div class="navigation">

    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
      <!-- 与之对应的插槽 -->
      <div>
        <slot name="login"></slot>
      </div>
      <!-- 小屏控制器 -->
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <slot name="home"></slot>
          </li>
          <li class="nav-item">
            <slot name="history"></slot>
          </li>
          <li class="nav-item">
            <slot name="details"></slot>
          </li>
          <li class="nav-item">
            <slot name="user"></slot>
          </li>
        </ul> 

        <div>
          <slot name="search"></slot>
        </div>
        
      </div>
    </nav>

  </div>
</template>

<script>
  export default {
    name: 'Navigation',
    data () {
      return {

      }
    },
    mounted() {
      // 获取本地用户数据信息来重定向用户名称与跳转路由地址
      if (JSON.parse(localStorage.getItem('userInformation'))){
        this.$store.state.loginState = JSON.parse(localStorage.getItem('userInformation')).username;
        this.$store.state.loginPath = '/userCenter';
      }
    },
  }

</script>

<style scoped>

</style>